<template>
    <view class="OrderBox">
        <cu-custom text-color="black" :is-back="true" fh-color="#333">
            <block slot="content">我的订单</block>
        </cu-custom>
        <view class="bg" :style="{backgroundImage: `url(${imgUrl + gameDetailsData.Order.Background})`}"></view>
        <view class="LockHead" :style="{top: CustomBar + 'px'}">
            <view class="SearchBox">
                <image class="SearchIcon" :src="imgUrl + gameDetailsData.Order.Search"></image>
                <view class="line"></view>
                <input v-model.trim="KeyWords" class="Input" placeholder="搜索"></input>
                <view class="SearchBtn">搜索</view>
            </view>

            <view class="ClassifiedMenu">
                <view class="ClassificationItem" v-for="(item,index) in classification" :key="index"
                      @click="ChangeCurrentClassification(item.id)">
                    <text :style="{color: item.id === CurrentClassification ? 'black' : '#9F9F9F',fontWeight: item.id === CurrentClassification ? 700 : 400}">
                        {{ item.text }}
                    </text>
                    <view class="CurrentLine" :style="{opacity: CurrentClassification === item.id ? 1 : 0}"></view>
                </view>
            </view>
        </view>

        <!-- 订单列表 -->
        <scroll-view :scroll-y="true" class="scroll" @scrolltolower="scrolltolower"
                     :style="{height:height - CustomBar+'px'}">
            <view class="List">
                <view class="ListItem" v-for="(item,indexes) in OrderList" :key="indexes"
                      @click.stop="ToOrderDetails(item.orderCode)">
                    <view class="OrderCodeAndOrderStatus">
                        <view class="OrderCode">订单编号: {{ item.orderCode }}</view>
                        <view class="OrderStatus" v-if="item.orderStatus === 28">待付款</view>
                        <view class="OrderStatus" v-if="item.orderStatus === 29">待发货</view>
                        <view class="OrderStatus" v-if="item.orderStatus === 30">待收货</view>
                        <view class="OrderStatus" v-if="item.orderStatus === 40">已完成</view>
                        <view class="OrderStatus" v-if="item.orderStatus === 20">已取消</view>
                    </view>
                    <scroll-view :scroll-x="true" class="OrderImageList">
                        <image :src="i.previewImg" v-for="(i,index) in item.orderGoodsDetailVos"
                               class="OrderImageListItem" :key="index"></image>

                    </scroll-view>
                    <view class="TotalCountAndTotalPrice">
                        <view class="TotalCount">共{{ item.orderGoodsDetailVos.length }}件</view>
                        <view class="TotalPrice">
                            实付: ￥{{ item.orderPrice }}
                        </view>
                    </view>
                    <view class="BtnArea">
                        <view class="CancelOrder" @click.stop="CancelOrder('',item.orderCode)"
                              v-if="item.orderStatus === 28">取消订单
                        </view>
                        <view class="ImmediatePayment" @click.stop="ImmediatePayment"
                              v-if="item.orderStatus === 28 && item.payMode !== 2">立即支付
                        </view>
                        <view class="ConfirmReceiptOfGoods" @click.stop="ConfirmReceiptOfGoods('',item.orderCode)"
                              v-if="item.orderStatus === 30">确认收货
                        </view>
                        <view class="ProofPayment"
                              v-if="(item.payMode === 2 && item.orderStatus === 28) && item.payInfoStatus !== true"
                              @click.stop="ProofPayment('',item.orderCode)">付款凭证
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>


        <!-- 弹窗区域 -->
        <view class="cu-modal" :class="modalName === 'Image'?'show':''" @click="modalName = null">
            <view class="cu-dialog" @click.stop="">
                <view class="ConfirmReceiptOfGoods" v-if="CurrentModel === 'ConfirmReceiptOfGoods'">
                    <view class="title">确认收货吗?</view>
                    <view class="BtnArea">
                        <view class="CancelBtn" @click="ConfirmReceiptOfGoods('Cancel')">取消</view>
                        <view class="ConfirmBtn" @click="ConfirmReceiptOfGoods('Confirm')">确定</view>
                    </view>
                </view>
                <view class="ImmediatePayment" v-if="CurrentModel === 'ImmediatePayment'">
                    <view class="title">立即支付?</view>
                </view>
                <view class="ProofPayment" v-if="CurrentModel === 'ProofPayment'">
                    <view class="title">付款信息</view>
                    <view class="MethodOfPayment">
                        <view class="MethodOfPaymentTitle">支付方式</view>
                        <picker mode="selector" class="picker" :range="rangeList" range-key="name"
                                @change="pickerChange">
                            <view class="Selector">
                                <view v-if="rangeIndex === ''" style="font-size: 28rpx">请选择支付方式</view>
                                <view v-else style="color: #333">{{ rangeList[rangeIndex].name }}</view>
                                <image class="BottomArrow" :src="imgUrl + '/static/classification/DropArrow_Icon.png'">
                                </image>
                            </view>
                        </picker>
                    </view>
                    <view class="ProofOfPayment">
                        <view class="ProofOfPaymentTitle">付款凭证</view>
                        <view class="ProofOfPaymentContent">
                            <view class="ProofList" v-if="ProofList.length > 0">
                                <view v-for="(item,index) in ProofList" :key="index"
                                      class="ProofListItem">
                                    <image :src="item" class="ProofListImage"></image>
                                    <image :src="imgUrl + '/static/Order/del.png'" class="clearImage"
                                           @click="DelImage(index)"></image>
                                </view>
                            </view>
                            <image class="UploadImage" :src="imgUrl + '/static/Order/Upload.jpg'" @click="UploadImage"
                                   v-if="ProofList.length < 3"></image>
                        </view>
                    </view>
                    <view class="NoteOfVoucher">
                        <view class="NoteOfVoucherTitle">凭证备注</view>
                        <textarea class="textarea" placeholder="可以输入必要的备注信息，方便查账" :value="textareaValue"
                                  placeholder-class="placeholder"></textarea>
                    </view>
                    <view class="BtnArea">
                        <view class="CancelBtn" @click="ProofPayment('Cancel')">取消</view>
                        <view class="ConfirmBtn" @click="ProofPayment('Confirm')">确定</view>
                    </view>
                </view>
                <view class="CancelOrder" v-if="CurrentModel === 'CancelOrder'">
                    <view class="title">是否取消订单?</view>
                    <view class="BtnArea">
                        <view class="CancelBtn" @click="CancelOrder('Cancel')">取消</view>
                        <view class="ConfirmBtn" @click="CancelOrder('Confirm')">确定</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import gameDetails from "../../static/lib/public";

export default {
    data() {
        return {
            CustomBar: this.CustomBar,
            height: '',

            isShow: false,

            modalName: '',

            imgUrl: this.$http.imgUrl,

            gameDetailsData: '',

            KeyWords: '',

            classification: [{
                text: '全部',
                id: 0
            },
                {
                    text: '待付款',
                    id: 28
                },
                {
                    text: '待发货',
                    id: 29
                },
                {
                    text: '待收货',
                    id: 30
                },
                {
                    text: '已完成',
                    id: 40
                }
            ],
            CurrentClassification: 0,

            page: {
                pageNumber: 1,
                pageSize: 10
            },

            OrderList: [],

            totalPage: '',

            CurrentModel: '',

            ProofList: [],

            rangeList: [{
                name: '微信',
                value: 1
            },
                {
                    name: '支付宝',
                    value: 2
                },
                {
                    name: '银行卡',
                    value: 3
                },
                {
                    name: '其他',
                    value: 4
                }
            ],
            rangeIndex: '',

            rangeValue: '',

            textareaValue: '',

            orderCode: '',


        }
    },
    onLoad() {
        this.height = uni.getSystemInfoSync().windowHeight
        this.gameDetailsData = gameDetails

        uni.$off('gainImage')
        uni.$on('gainImage', (data) => {
            this.ProofList.push(data)
        })
    },
    onShow() {
        this.initCsh()
        this.getOrderShop()
    },
    methods: {
        // 初始化
        initCsh() {
            this.page.pageNumber = 1
            this.page.pageSize = 10
            this.OrderList = []
            this.totalPage = ''
        },
        async getOrderShop() {
            const url = this.api.Order.OrderList
            uni.showLoading({
                title: '加载中'
            })
            const {
                data
            } = await this.$http.get(url, {
                orderStatus: this.CurrentClassification,
                pageNumber: this.page.pageNumber,
                pageSize: this.page.pageSize
            })
            this.totalPage = data.data.totalPage
            this.OrderList = this.OrderList.concat(data.data.data)
            uni.hideLoading()
        },
        // 跳转到订单详情
        ToOrderDetails(orderCode) {
            uni.navigateTo({
                url: '/pagesA/Order/OrderDetails?id=' + orderCode
            })
        },
        // 更改分类
        ChangeCurrentClassification(index) {
            this.CurrentClassification = index
            this.OrderList = []
            this.page.pageNumber = 1
            this.getOrderShop()
        },
        // 触底
        scrolltolower() {
            if (this.page.pageNumber >= this.totalPage) {
                uni.showToast({
                    title: '没有更多了',
                    icon: 'none'
                })
                return
            }
            this.page.pageNumber = this.page.pageNumber + 1
            this.getOrderShop()
        },
        // 取消订单
        async CancelOrder(condition, orderCode) {
            if (condition === '') {
                this.CurrentModel = 'CancelOrder'
                this.orderCode = orderCode
                this.showModel()
            } else {
                if (condition === 'Cancel') {
                    this.hideModel()
                } else if (condition === 'Confirm') {
                    const url = this.api.Order.CancelOrder
                    const res = await this.$http.get(url, {
                        orderCode: this.orderCode
                    })
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '取消成功',
                            icon: 'none'
                        })
                        this.hideModel()
                        this.OrderList = []
                        await this.getOrderShop()
                    }
                }
            }

        },
        // 立即支付
        ImmediatePayment() {
        },
        // 确认收货
        async ConfirmReceiptOfGoods(condition, orderCode) {
            if (condition === '') {
                this.orderCode = orderCode
                this.CurrentModel = 'ConfirmReceiptOfGoods'
                this.showModel()
            } else {
                if (condition === 'Cancel') {
                    this.hideModel()
                } else if (condition === 'Confirm') {
                    const url = this.api.Order.ReceiveGoods
                    const res = await this.$http.get(url, {
                        orderCode: this.orderCode
                    })
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '确认收货成功',
                            icon: 'none'
                        })
                        this.hideModel()
                        this.OrderList = []
                        await this.getOrderShop0()
                    }
                    console.log(res, '确认收货响应')
                }
            }

        },
        // 付款凭证
        async ProofPayment(condition, Code) {
            if (condition === '') {
                this.CurrentModel = 'ProofPayment'
                this.showModel()
                this.orderCode = Code
            } else {
                if (condition === 'Cancel') {
                    this.hideModel()
                } else if (condition === 'Confirm') {
                    if (this.rangeValue === '') {
                        uni.showToast({
                            title: '请选择付款方式',
                            icon: 'none'
                        })
                        return
                    }
                    if (this.ProofList.length === 0) {
                        uni.showToast({
                            title: '请上传付款凭证',
                            icon: 'none'
                        })
                        return
                    }
                    const url = this.api.Order.OfflinePay
                    const StringProofList = JSON.stringify(this.ProofList)
                    const res = await this.$http.post(url, {
                        orderCode: this.orderCode,
                        payImgUrl: StringProofList,
                        payType: this.rangeList[this.rangeIndex].value,
                        remark: this.textareaValue
                    })
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '提交成功',
                            icon: 'none'
                        })
                    }
                    this.hideModel()
                    this.OrderList = []
                    await this.getOrderShop()
                }
            }
        },
        // 上传图片
        UploadImage() {
            if (this.ProofList.length >= 3) {
                uni.showToast({
                    title: '最多上传三张',
                    icon: 'none'
                })
                return
            }
            this.$ChooseImage.ChooseImage(3 - this.ProofList.length)
            uni.hideLoading()
        },
        DelImage(index) {
            this.ProofList.splice(index, 1)
        },
        pickerChange(e) {
            this.rangeIndex = e.detail.value
            this.rangeValue = this.rangeList[e.detail.value].name
        },
        showModel() {
            this.modalName = 'Image'
        },
        hideModel() {
            this.modalName = null
        },
    },

}
</script>

<style lang="scss" scoped>
.OrderBox {

  .bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    z-index: -1;
  }

  .LockHead {
    position: fixed;
    width: 100%;
    height: 160rpx;
    z-index: 1;

    .SearchBox {
      width: 702rpx;
      height: 72rpx;
      background: #FFFFFF;
      border-radius: 36rpx;
      display: flex;
      align-items: center;
      margin-left: 24rpx;


      .SearchIcon {
        width: 44rpx;
        height: 44rpx;
        margin-left: 16rpx;
        margin-right: 16rpx;
      }

      .line {
        width: 2rpx;
        height: 40rpx;
        background: rgba(153, 153, 153, 0.2);
        border-radius: 2rpx;
      }

      .Input {
        margin-left: 16rpx;
        flex: 1;
      }

      .SearchBtn {
        width: 120rpx;
        height: 56rpx;
        background: #4D8BFF;
        border-radius: 28rpx;
        text-align: center;
        line-height: 56rpx;
        color: #fff;
        margin-right: 8rpx;
      }

    }

    .ClassifiedMenu {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 40rpx;

      .ClassificationItem {
        width: 25%;
        font-size: 28rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        .CurrentLine {
          width: 32rpx;
          height: 4rpx;
          background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
          border-radius: 2rpx;
          margin-top: 5rpx;
        }
      }
    }
  }

  .scroll {
    width: 100%;
    //margin-top: 24rpx;
    padding-top: 184rpx;
    padding-bottom: 20rpx;
    padding-left: 24rpx;

    .List {
      width: 100%;

      .ListItem {
        width: 702rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
        border-radius: 24rpx;
        padding: 32rpx 24rpx 32rpx 24rpx;
        margin-bottom: 24rpx;

        .OrderCodeAndOrderStatus {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 32rpx;

          .OrderStatus {
            color: #FF5C46;
          }
        }

        .OrderImageList {
          height: 136rpx;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;

          .OrderImageListItem {
            display: inline-block;
            width: 136rpx;
            height: 100%;
            background: #D8D8D8;
            border-radius: 8rpx;
            margin-right: 32rpx;

            &:last-child {
              margin-right: 0;
            }
          }


        }

        .TotalCountAndTotalPrice {
          display: flex;
          justify-content: flex-end;
          margin-top: 32rpx;
          width: 100%;

          .TotalCount {
            margin-right: 5rpx;
          }
        }

        .BtnArea {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          justify-content: flex-end;
          margin-top: 24rpx;

          .CancelOrder {
            width: 160rpx;
            height: 56rpx;
            border-radius: 28rpx;
            border: 2rpx solid rgba(153, 153, 153, 0.4);
            text-align: center;
            line-height: 56rpx;
            color: #999999;
            margin-right: 24rpx;
          }

          .ImmediatePayment {
            width: 160rpx;
            height: 56rpx;
            background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
            border-radius: 28rpx;
            line-height: 56rpx;
            color: #fff;
            text-align: center;
            margin-right: 24rpx;
          }

          .ConfirmReceiptOfGoods {
            width: 160rpx;
            height: 56rpx;
            background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
            border-radius: 28rpx;
            line-height: 56rpx;
            text-align: center;
            color: #fff;
            margin-right: 24rpx;
          }

          .ProofPayment {
            width: 160rpx;
            height: 56rpx;
            background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
            border-radius: 28rpx;
            line-height: 56rpx;
            text-align: center;
            color: #fff;

            .title {
              width: 100%;
              text-align: center;
            }
          }
        }
      }
    }
  }


  .cu-dialog {
    border-radius: 24rpx !important;

    .ConfirmReceiptOfGoods {
      width: 496rpx;
      height: 300rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      padding: 56rpx 48rpx;
      color: #333333;
      font-size: 32rpx;
    }

    .ProofPayment {
      width: 670rpx;
      background: #FFFFFF;
      border-radius: 24rpx !important;
      color: #333333;
      font-size: 32rpx;
      padding: 40rpx 32rpx;

      .title {
        color: #333333;
        font-size: 32rpx;
        font-weight: 700;
      }

      .MethodOfPayment {
        .MethodOfPaymentTitle {
          text-align: start;
          font-size: 28rpx;
          margin-top: 40rpx;
          font-weight: 700;
          margin-bottom: 24rpx;
        }

        .picker {
          .Selector {
            height: 76rpx;
            background: rgba(153, 153, 153, 0.12);
            border-radius: 8rpx;
            text-align: start;
            line-height: 76rpx;
            padding: 0 24rpx;
            color: #999999;
            font-size: 28rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .BottomArrow {
              width: 28rpx;
              height: 28rpx;
            }
          }

        }

      }


      .ProofOfPayment {
        margin-top: 40rpx;

        .ProofOfPaymentTitle {
          text-align: start;
          color: #333333;
          font-size: 28rpx;
          font-weight: 700;
        }

        .ProofOfPaymentContent {
          display: flex;
          margin-top: 24rpx;
          width: 100%;

          .UploadImage {
            width: 186rpx;
            height: 186rpx;
          }

          .ProofList {
            display: flex;

            .ProofListItem {
              width: 186rpx;
              height: 186rpx;
              position: relative;
              margin-right: 24rpx;


              .ProofListImage {
                width: 100%;
                height: 100%;

                &:last-child {
                  margin-right: 0;
                }
              }

              .clearImage {
                position: absolute;
                top: 0;
                right: 0;
                width: 32rpx;
                height: 32rpx;
              }

            }

          }
        }

      }

      .NoteOfVoucher {
        margin-top: 40rpx;

        .NoteOfVoucherTitle {
          text-align: start;
          color: #333333;
          font-size: 28rpx;
          font-weight: 700;
        }

        .textarea {
          width: 606rpx;
          height: 236rpx;
          background: rgba(153, 153, 153, 0.12);
          border-radius: 8rpx;
          margin-top: 24rpx;
          padding-top: 24rpx;
          padding-left: 30rpx;
          text-align: start;
          font-size: 28rpx;
          color: #333;
        }

        /deep/ .placeholder {
          color: #999999 !important;
          font-size: 28rpx !important;
          text-align: start !important;
        }
      }

      .BtnArea {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32rpx 0 30rpx;
        font-size: 28rpx;

        .ConfirmBtn {
          width: 248rpx;
          height: 76rpx;
          background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
          border-radius: 38rpx;
          line-height: 76rpx;
          text-align: center;
        }

        .CancelBtn {
          width: 248rpx;
          height: 76rpx;
          border-radius: 38rpx;
          border: 2rpx solid rgba(153, 153, 153, 0.4);
          line-height: 76rpx;
          text-align: center;
        }
      }
    }

    .CancelOrder {
      width: 496rpx;
      height: 300rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      padding: 56rpx 48rpx;
      color: #333333;
      font-size: 32rpx;
    }

    .BtnArea {
      display: flex;
      align-items: center;
      margin-top: 88rpx;

      .CancelBtn {
        width: 176rpx;
        height: 60rpx;
        border-radius: 30rpx;
        border: 2rpx solid rgba(153, 153, 153, 0.4);
        color: #999;
        line-height: 60rpx;
        text-align: center;
        margin-right: 48rpx;
      }

      .ConfirmBtn {
        width: 176rpx;
        height: 60rpx;
        background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
        border-radius: 30rpx;
        line-height: 60rpx;
        text-align: center;
        color: #fff;
      }
    }

  }

}
</style>